@import "~assets/styles/_bootstrap";

html, body {
	height: 100%;
}

.im-page {
	// position: fixed;
	width: 100%;
	height: 100%;
	background: #ebebeb;

	.header {
		width: 100%;
		height: rem(45px);
		line-height: rem(45px);
		text-align: center;
		background: #3a3a3d;

		> a {
			position: absolute;
			display: inline-block;
	    top: 0;
	    left: 0;
	    bottom: 0;
	    width: rem(50px);
	    height: 100%;
	    margin: auto 0;
	    z-index: 1000;

			&:before {
		    position: absolute;
		    top: 0;
		    bottom: 0;
		    left: rem(20px);
		    display: block;
		    margin: auto 0;
		    width: rem(12px);
		    height: rem(12px);
				content: '';
		    border-bottom: 1px solid #fff;
		    border-left: 1px solid #fff;
		    transform: rotate(45deg);
		    transform-origin: 50% 50%;
			}


			&.edit {
				display: none;
		    left: inherit;
				right: rem(10px);
				height: rem(25px);
				line-height: rem(25px);
				font-size: rem(14px);
		    color: #fff;

		    &.on {
		    	display: block;
		    }

		    &:before {
		    	display: none;
		    }
			}

		}

		> h2 {
			display: inline-block;
			color: #fff;
			font-size: rem(18px);
		}



		> i {
			&.icon-user_fill {
				position: absolute;
				top: 0;
				bottom: 0;
				right: rem(10px);
				margin: auto 0;
				width: rem(20px);
				height: rem(20px);
				font-size: rem(20px);
				color: #fff;

			}
		}
	}

	.content {
		position: absolute;
		top: rem(45px);
		bottom: rem(66px);
		width: 100%;

		.list {
			padding: 0 rem(10px);
			height: 100%;

			.item {
				padding-top: rem(15px);

				.avatar {
					display: inline-block;
					width: rem(40px);
					height: rem(40px);
					vertical-align: top;

					> img {
						display: block;
						width: 100%;
						height: 100%;
						border: none;
					}
				}

				.message {
					display: inline-block;
					width: rem(232px);


					&.voice .body {
						.icon {
							color: #999;
						}

						> em {
					    position: absolute;
					    right: rem(-25px);
					    height: rem(20px);
					    line-height: rem(20px);
					    bottom: 0;
					    font-size: rem(13px);
						}
					}

					.body {
						display: inline-block;
						margin-left: rem(5px);
						padding: rem(10px);
						width: auto;
						max-width: rem(232px);
						color: #333;
				    border: 1px solid #ccc;
				    border-radius: 5px;
						background: #fff;
						vertical-align: middle;

						&:before {
					    position: absolute;
					    display: block;
					    left: rem(-5px);
					    top: rem(15px);
					    width: rem(7px);
					    height: rem(7px);
					    content: ' ';
					    border-bottom: 1px solid #ccc;
					    border-left: 1px solid #ccc;
					    background: #fff;
					    transform: rotate(45deg);
						}
					}

				}

				&.me {
					text-align: right;

					.avatar {
						float: right;
					}

					.message {

						.body {
							min-width: 20%;
							margin-left: 0;
							margin-right: (10px);
							text-align: left;
							border: 1px solid rgba(130, 160, 122, 0.5);
							background: #a0e75a;

							&:before {
						    right: rem(-5px);
						    left: inherit;
								background: #a0e75a;
						    transform: rotate(-135deg);
						    border-bottom: 1px solid rgba(130, 160, 122, 0.5);
						    border-left: 1px solid rgba(130, 160, 122, 0.5);
							}

							.icon {
						    display: inline-block;
								float: right;
						    transform: rotate(180deg);
							}

							> em {
						    left: rem(-20px);
							}
						}
					}
				}

			}
		}
	}

	.footer {
		position: fixed;
		bottom: 0;
		padding: rem(5px);
		width: 100%;
		height: auto;
		border-top: 1px solid #d7d7d7;
		background: #f5f4f6;
		z-index: 999;

		.input-group {

			&:after {
				display: block;
				clear: both;
				content: ' ';
			}

			.icon {
				display: inline-block;
				width: rem(30px);
				height: rem(30px);
				font-size: rem(30px);
				color: #999;
				vertical-align: middle;
			}

			.icon-append {
				right: 0;
			}

			.input-item {
				float: left;
				flex-wrap: nowrap;
				height: 100%;
			}

			.input-left {
				padding-top: rem(6px);
				width: rem(30px);
				height: rem(30px);
			}

			.input-main {
		    display: inline-block;
		    margin: 0 rem(8px);
				width: rem(250px);
		    border: 1px solid #ccc;
		    border-radius: rem(5px);

		    .text {
		    	padding: rem(13px) rem(5px) rem(10px) rem(5px);
			    text-align: center;
			    font-size: rem(14px);
			    font-weight: bold;
			    color: #666;
			    cursor: pointer;

			    &.on {
				    height: auto;
				    line-height: inherit;
				    border-radius: rem(5px);
				    background: #fff;
			    }

			    > textarea {
				    width: 100%;
				    height: 100%;
				    font-size: rem(16px);
				    color: #333;
				    border: none;
				    border-radius: rem(5px);
				    overflow-y: hidden;
			    }
		    }
			}

			.input-right {
				padding-top: rem(6px);
				width: rem(69px);
			}
		}
	}

}